<template>
  <div class="download-center">
    <el-table
      ref="tableWarp"
      v-loading="loading"
      class="table-warp"
      :data="tableData"
      border
      style="width: 100%;"
      :max-height="getTableHeight()"
      element-loading-background="rgba(0, 0, 0, 0.25)"
      element-loading-text="拼命加载中"
    >
      <el-table-column
        v-for="item in columns"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :min-width="item.minWidth"
        :show-overflow-tooltip="item.showTooltip"
        :formatter="item.formatterContent"
        :align="item.align || 'center'"
      />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <ProgressDef v-if="scope.row.status === 1" :min="scope.row.applyTime" />
          <!-- <DownProgress v-if="scope.row.status === 2" :ref="`pro_${scope.row.id}`" :item="scope.row" @downloadFile="downloadFile" /> -->
          <el-link v-if="scope.row.status === 2" slot="reference" type="primary" :underline="false" @click="downloadFile(scope.row)">下载</el-link>
        </template>
      </el-table-column>
      <template slot="empty">
        <div class="empty-text">
          <svg-icon icon-class="taken" class="svg-container" />
          <span class="empty-content">暂无数据</span>
        </div>
      </template>
    </el-table>
    <!-- 分页选择器 -->
    <div v-if="pageData.total > 0" class="pagination-container">
      <el-pagination
        background
        :current-page="pageData.currentPage"
        :page-size="pageData.pageSize"
        :page-sizes="pageData.pageSizes"
        :pager-count="5"
        layout="total, slot, sizes, prev, pager, next, jumper"
        :total="pageData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { columns } from './config';
import { saveAs } from 'file-saver';
import {
  getDownloadList,
  getDownloadFileUrl
} from '@/api/downloadApi';
import ProgressDef from '@/components/common/ProgressDef';
// import DownProgress from './down-progress';
export default {
  name: 'DownloadCenter',
  inject: ['countTableHeght', 'getTableHeight'],
  components: {
    ProgressDef
  },
  data() {
    return {
      loading: false,
      columns,
      pageData: {
        total: 0,
        pageSize: 10,
        currentPage: 1,
        pageSizes: [10, 20, 50, 100]
      },
      tableData: [],
      timer: null
    };
  },
  computed: {
    paginationShow() {
      return this.pageData.total > 10;
    }
  },
  mounted() {
    this.countTableHeght(150);
    this.getList();
    this.timer = setInterval(() => {
      this.getList();
    }, 60 * 1000);
  },
  destroyed() {
    this.timer && clearInterval(this.timer);
  },
  methods: {
    downloadFile(row) {
      getDownloadFileUrl(row.id).then(res => {
        // console.log(res);
        if (res.resultCode === '0000') {
          if (!res.data) {
            this.$message.error('文件路径获取失败');
            return false;
          }
          // console.log(this.$refs[`pro_${row.id}`]);
          // this.$refs[`pro_${row.id}`].dealTime();
          // 说明是正常的文件流
          saveAs(res.data, row.fileName + '.xlsx');
        } else {
          this.$message.error(res.resultMessage || '文件路径获取失败');
        }
      });
    },
    getList() {
      getDownloadList({
        current: this.pageData.currentPage,
        size: this.pageData.pageSize
      }).then(res => {
        if (res.resultCode === '0000') {
          this.tableData = res.data;
          this.pageData.total = res.total;
        }
      });
    },
    handleSizeChange(val) {
      this.pageData.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageData.currentPage = val;
      this.getList();
    }
  }
};
</script>
<style lang="scss" scoped>
.download-center{
  margin: 20px;
  .pagination-container {
    background: #fff;
    padding: 32px 16px;
    text-align: right;
  }
  ::v-deep .el-table__empty-block{
    height: 500px !important;
  }
  .empty-text {
    position: relative;
    height: 500px;
    text-align: left;
    line-height: 490px;
    font-size: 14px;
    margin-left: -85px;
  }
  .svg-container {
    display: inline-block;
    padding: 6px 5px 6px 0px;
    vertical-align: middle;
    width: 150px;
    height: 150px;
  }
  .empty-content {
    position: absolute;
    top: 86px;
    left: 46px;
  }
}
</style>
